<template>
  <div>
    <div class="nav">
      <nav>
        <ul>
          <li>
            <router-link to="/recommend">
              <span
                @click="switchshow($event)"
                @mouseover="addshow($event)"
                @mouseout="removeshow($event)"
                :class="{ show: Recommend, a: Recommend }"
              >
                推荐
              </span>
              <p></p>
            </router-link>
          </li>

          <li>
            <router-link to="/ranking">
              <span
                @click="switchshow($event)"
                @mouseover="addshow($event)"
                @mouseout="removeshow($event)"
                :class="{ show: Ranking, a: Ranking }"
              >
                排行榜
              </span>
              <p></p>
            </router-link>
          </li>
          <li>
            <router-link to="/song">
              <span
                @click="switchshow($event)"
                @mouseover="addshow($event)"
                @mouseout="removeshow($event)"
                :class="{ show: Song, a: Song }"
              >
                歌单
              </span>
              <p></p
            ></router-link>
          </li>
          <li>
            <router-link to="/radio">
              <span
                @click="switchshow($event)"
                @mouseover="addshow($event)"
                @mouseout="removeshow($event)"
                :class="{ show: Radio, a: Radio }"
              >
                主播电台
              </span>
              <p></p
            ></router-link>
          </li>
          <li>
            <router-link to="/singer">
              <span
                @click="switchshow($event)"
                @mouseover="addshow($event)"
                @mouseout="removeshow($event)"
                :class="{ show: Singer, a: Singer }"
              >
                歌手
              </span>
              <p></p
            ></router-link>
          </li>
          <li>
            <router-link to="/newsong">
              <span
                @click="switchshow($event)"
                @mouseover="addshow($event)"
                @mouseout="removeshow($event)"
                :class="{ show: Newsong, a: Newsong }"
              >
                新碟上架
              </span>
              <p></p
            ></router-link>
          </li>
        </ul>
      </nav>
    </div>
    <router-view :key="$route.fullPath"></router-view>
  </div>
</template>
<script>
export default {
  data() {
    return {
      Recommend: false,
      Ranking: false,
      Song: false,
      Radio: false,
      Singer: false,
      Newsong: false,
    };
  },
  methods: {
    addshow(e) {
      if (e.target.className === "show a") {
        return;
      }
      e.target.className = "show";
    },
    removeshow(e) {
      if (e.target.className === "show a") {
        return;
      }
      e.target.className = "";
    },
    switchshow(e) {
      let ul = e.path[3].querySelectorAll("span");
      for (let i = 0; i < ul.length; i++) {
        ul[i].className = "";
      }
      e.target.className = "show a";
    },
  },
  created() {
    switch (this.$router.history.current.name) {
      case "Recommend":this.Recommend = true;break;
      case "Ranking":this.Ranking = true;break;
      case "Song":this.Song = true;break;
      case "Radio":this.Radio = true;break;
      case "Singer":this.Singer = true; break;
      case "Newsong":this.Newsong = true;break;
    }
  },
};
</script>
<style scoped>
.nav {
  width: 100%;
  height: 35px;
  background-color: #c20c0c;
}
nav {
  width: 1100px;
  height: 70px;
  margin: 0 auto;
}
nav ul {
  display: flex;
  margin-left: 190px;
}
nav ul li {
  height: 20px;
  line-height: 16px;
  border-radius: 20px;
  text-align: center;
  margin: 7px 17px 0;
}
nav ul li a {
  display: block;
  height: 100%;
  width: 100%;
  color: #cccccc;
}
nav ul li span {
  display: block;
  height: 100%;
  width: 100%;
  padding: 1px 15px 0;
  border-radius: 10px;
}
.show {
  background-color: #9b0909;
}
nav ul li a {
  font-size: 8px;
  color: #fff;
}
</style>